<clr-wizard #wizard [(clrWizardOpen)]="createOpened" [clrWizardClosable]="false" (clrWizardOnCancel)="onCancel()"
            (clrWizardOnFinish)="onSubmit()">
  <clr-wizard-title>创建部署计划</clr-wizard-title>

  <clr-wizard-button [type]="'cancel'">取消</clr-wizard-button>
  <clr-wizard-button [type]="'previous'">上一步</clr-wizard-button>
  <clr-wizard-button [type]="'next'">下一步</clr-wizard-button>
  <clr-wizard-button [type]="'finish'">完成</clr-wizard-button>

  <clr-wizard-page [clrWizardPageNextDisabled]="basicForm.invalid"
                   (clrWizardPageOnCommit)="onBasicFormCommit()">
    <ng-template clrPageTitle>基本信息</ng-template>
    <form clrForm #basicForm="ngForm">
      <clr-input-container>
        <label>名称</label>
        <input clrInput size=45 type="text" maxlength="15" pattern="{{name_pattern}}" [(ngModel)]="item.name"
               name="name" (blur)="nameOnBlur()" required>
        <clr-control-error *ngIf="nameCtrl&&nameCtrl.errors&&nameCtrl.errors.required">此字段为必填项</clr-control-error>
        <clr-control-error *ngIf="nameCtrl&&nameCtrl.errors&&nameCtrl.errors.repeat">名称重复</clr-control-error>
        <clr-control-error *ngIf="nameCtrl&&nameCtrl.errors&&nameCtrl.invalid">{{name_pattern_tip}}</clr-control-error>
        <clr-control-helper>{{name_pattern_tip}}</clr-control-helper>
      </clr-input-container>
      <clr-select-container>
        <label>区域</label>
        <select clrSelect [(ngModel)]="item.region" name="provider" (change)="onRegionChange()" required>
          <option [value]="">请选择</option>
          <option *ngFor="let re of regions" [value]="re.name">{{re.name}}</option>
        </select>
        <clr-control-error>此字段为必填项</clr-control-error>
      </clr-select-container>
      <clr-select-container>
        <label>部署模型</label>
        <select [(ngModel)]="item.deploy_template" name="template" (change)="onDeployChange()" required clrSelect>
          <option value="">请选择</option>
          <option value="SINGLE">一主多节点</option>
          <option value="MULTIPLE">多主多节点</option>
        </select>
        <clr-control-error>此字段为必填项</clr-control-error>
      </clr-select-container>
      <clr-select-container>
        <label>项目</label>
        <select clrSelect [(ngModel)]="item.item_id" name="item" multiple>
          <option [value]="" disabled>请选择</option>
          <option *ngFor="let item of items" [value]="item.id">{{item.name}}</option>
        </select>
        <clr-control-helper>部署计划需要授权到项目才可用（非必填）</clr-control-helper>
      </clr-select-container>
    </form>
  </clr-wizard-page>
  <clr-wizard-page [clrWizardPageNextDisabled]="planForm.invalid">
    <ng-template clrPageTitle>配置计划</ng-template>
    <form clrForm #planForm="ngForm">
      <clr-select-container *ngIf="item.deploy_template === 'SINGLE'">
        <label>可用区</label>
        <select clrSelect [(ngModel)]="item.zone" name="cloud-region" required>
          <option [value]="">请选择</option>
          <option *ngFor="let zone of zones" [value]="zone.name">{{zone.name}}</option>
        </select>
        <clr-control-error>此字段为必填项</clr-control-error>
      </clr-select-container>

      <clr-select-container *ngIf="item.deploy_template === 'MULTIPLE'">
        <label>可用区</label>
        <select clrSelect [(ngModel)]="item.zones" name="cloud-region" multiple required>
          <option [value]="">请选择</option>
          <option *ngFor="let zone of zones" [value]="zone.name">{{zone.name}}</option>
        </select>
        <clr-control-error>此字段为必填项</clr-control-error>
      </clr-select-container>

      <div>
        <clr-select-container>
          <label>Master 规格</label>
          <select clrSelect [(ngModel)]="item.vars['master_model']" name="master" required>
            <option [value]="">请选择</option>
            <option *ngFor="let model of computeModels" [value]="model.name">{{model.name}}</option>
          </select>
          <clr-control-error>此字段为必填项</clr-control-error>
        </clr-select-container>
        <clr-select-container>
          <label>Worker 规格</label>
          <select clrSelect [(ngModel)]="item.vars['worker_model']" name="worker" required>
            <option [value]="">请选择</option>
            <option *ngFor="let model of computeModels" [value]="model.name">{{model.name}}</option>
          </select>
          <clr-control-error>此字段为必填项</clr-control-error>
        </clr-select-container>
      </div>
    </form>
    <div *ngIf="computeModels">
      <h3>配置参考</h3>
      <table class="table">
        <thead>
        <tr>
          <th>规格</th>
          <th>CPU(核)</th>
          <th>内存(GB)</th>
          <th>磁盘(GB)</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let model of computeModels">
          <td>{{model.name}}</td>
          <td>{{model.meta.cpu}}</td>
          <td>{{model.meta.memory}}</td>
          <td>{{model.meta.disk}}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </clr-wizard-page>
</clr-wizard>



